<template>
  <el-dialog title="文本+签名" :visible.sync="dialogVisible" width="60%" append-to-body :before-close="handleClose"
    :close-on-click-modal="false" :close-on-press-escape="false">
    <div class="text-template-sign">
      <el-input v-bind="outConfigInput" v-model="signValue.text" :validate-event="injectConfig.required"
        v-if="injectConfig.showText || injectConfig.showText === undefined">
      </el-input>
      <div @wheel="goWheel">
        <el-carousel :autoplay="false" trigger="click" type="card" height="200px" @change="carouselChange"
          ref="slideCarousel">
          <el-carousel-item v-for="(item, index) in srcList" :key="index">
            <div class="template-li">
              <el-image style="width: 100px; height: 100px" :src="item" :preview-src-list="srcList">
              </el-image>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- <div class="add-btn">
        <el-button type="success" @click="addTemplate">点击签名</el-button>
      </div> -->
    </div>
    <template #footer>
      <el-button type="info" @click="handleClose">
        取 消
      </el-button>
      <el-button type="primary" @click="confirm" :loading="loading">
        确 认
      </el-button>
    </template>
  </el-dialog>
</template>

<script>
import { textSignInput } from "./options";
import _ from "lodash";

export default {
  name: "WorkspaceJsonTextTemplatesign",

  props: {
    configInput: {
      type: [Object],
      default: () => {
        return {};
      }
    },
    value: {
      type: [Boolean],
      default: false
    },
    modalData: {
      type: [Object],
      default: () => {
        return {};
      }
    },
    isUpdata: {
      type: [Boolean],
      default: false
    },
    autoTemplateList: {
      type: [Array],
      default: () => {
        return [];
      }
    }
  },

  inject: ["designerConfig"],

  data() {
    return {
      dialogVisible: false,
      signValue: {
        text: "",
        img: ""
      },
      templateList: [],
      activeKey: 0,
      swiper: null,
      loading: false,
      userInfo:
        window.sessionStorage.getItem("userInfo") &&
        JSON.parse(window.sessionStorage.getItem("userInfo"))
    };
  },

  computed: {
    outConfigInput() {
      return {
        ...textSignInput,
        ...this.configInput,
        readonly: this.injectConfig.readonly,
        disabled: this.injectConfig.disabled,
        placeholder: this.injectConfig.placeholder
      };
    },
    injectConfig() {
      return this.designerConfig();
    },
    srcList() {
      let arr = this.templateList.map(item => {
        return item.sign;
      });
      return [...arr, ...this.autoTemplateList];
    }
  },

  watch: {
    value(n) {
      if (this.isUpdata) {
        this.signValue = _.cloneDeep(this.modalData);
      } else {
        this.signValue = {};
      }
      this.dialogVisible = n;
      if (n) {
        this.init();
      }
    },
    autoTemplateList() {
      this.$nextTick(() => {
        this.$refs.slideCarousel.setActiveItem(this.srcList.length - 1);
      });
    }
  },

  mounted() { },

  methods: {
    init() {
      this.getMyElectronicSignList();
    },
    handleClose() {
      this.$emit("input", false);
    },
    confirm() {
      this.signValue.img = this.srcList[this.activeKey];
      this.$emit("confirm", this.signValue);
    },
    carouselChange(val) {
      this.activeKey = val;
    },
    // 新增模板
    addTemplate() {
      this.$emit("addTemplate");
    },
    // 获取我得电子签名
    getMyElectronicSignList() {
      this.loading = true
      this.API.getSignTemplateList({ type: "ELECTRONIC_SIGN" }).then(
        async res => {
          const { data } = res;
          if (data) {
            this.templateList = data;
          }
        }
      ).finally(() => {
        this.loading = false
      });
    },
    goWheel(event) {
      console.log(event);
      if (event.deltaY > 0 && this.one == true) {
        //data中定义one为true 当one为true时执行
        this.$refs.slideCarousel.next(); //以此来控制每次轮播图切换的张数
        this.one = false;
        setTimeout(() => {
          this.one = true;
        }, 1000);
      }

      if (event.deltaY < 0 && this.one == true) {
        this.$refs.slideCarousel.prev();
        this.one = false;
        setTimeout(() => {
          this.one = true;
        }, 1000);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.swiper-slide {
  width: 300px;
}

.template-li {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: 20px;
}

.template-li.active {
  background-color: #67c23a;
}

.add-btn {
  margin: 20px 0 0;
  text-align: right;
}
</style>
